<template>
  <div class="box-view screen-all flex aCenter">
    <div v-for="(item, index) in titleList.list" :key="'title'+index">
      <el-button class="btn-view" type="primary" @click="toPath(item.path)">{{ item.title ?? '未知' }}</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, Ref, reactive, defineComponent } from 'vue';
import { useRouter, useRoute } from 'vue-router';

export default defineComponent({
  name: "index",
  components: {
    
  },
  setup () {
    const router = useRouter();

    const titleList = reactive({
      list: [
        { title: 'es6', path: 'esplus' },
        { title: '解构赋值实践应用', path: 'jiegou' },
        { title: '模板字符串', path: 'template-string' },
        { title: '数组及对象', path: 'obj' },
        { title: '异步', path: 'async' },
        { title: 'sanguo', path: 'sanguo' },
      ]
    });

    const toPath = (path: string|undefined) => {
      router.push({ name: path });
    }

    return {
      titleList,
      toPath,
    }
  },
});
</script>
<style lang="scss" scoped>
  .box-view {
    background-color: white;
    padding: 60px 0 0 0;

    .btn-view {
      width: 120px;
      margin: 8px 0 0 0;
    }
  }
</style>